<template>
  <div class="layout">
    <el-container>
      <el-header class="adminHeader">
        <nav>
          <img src="../../assets/logo.png" />
          <router-link to="/admin/home" active-class="avtive" >首页</router-link>
          
          <a>订单维护</a>
          <a>会员管理</a>
          <router-link to="/admin/stadium/set" active-class="avtive">场馆维护</router-link>
          <!-- <a>场馆维护</a> -->
          <a>系统管理</a>
          <a>配置</a>
        </nav>
        <div class="userInfo">
          <el-dropdown>
            <span class="el-dropdown-link">
              {{ user.name }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>积分:{{ user.score }}</el-dropdown-item>
                <el-dropdown-item @click="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside class="aside" :style="{ 'width': isCollapse ? '64px' : '180px' ,'height':'92vh'}">
          <span @click="isCollapse = !isCollapse" class="toggle">
            <el-icon v-if="isCollapse">
              <Expand />
            </el-icon>
            <el-icon v-else>
              <Fold />
            </el-icon>
          </span>
          <el-menu router background-color="#666" text-color="#fff" default-active="2" :collapse="isCollapse"
            class="icon">
            
            <MenuList :list="store.menu"></MenuList>
          </el-menu>
        </el-aside>
        <el-main class="main">
          <div ></div>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useMenu } from '@/stores/useMenu';


// 是否折叠
const isCollapse = ref(true)
// 用户信息
const user = ref(JSON.parse(sessionStorage.getItem('user') || "{}"))
// 退出登录
const logout = () => {
  // 清空session
  sessionStorage.removeItem('user')
  sessionStorage.removeItem('token')
  // 跳转到登录页
  location.href = '/'
}
let store = ref(useMenu());
store.value.getMenu()

  // console.log(store.value.getMenu);
 

</script>
<style>
.userInfo .el-dropdown-link {
  color: #fff
}

.userInfo .el-dropdown-link {
  outline: none;
}

.el-menu-item.is-active {
  color: #fff;
}

.el-menu-tooltip__trigger {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
<style scoped lang="scss" > 

.nav-list{
  
}
.aside {
  &::-webkit-scrollbar{display:none}
   background-color: #666;
   color: #fff;
   overflow-x: hidden;

   .toggle {
     width: 64px;
     display: inline-block;
     text-align: center;
     line-height: 64px;
     height: 64px;
   }

   .icon {
     // width: 54px;
     border: none;
   }
 }

 .adminHeader {
   display: flex;
   justify-content: space-between;
   background-color: #333;
   align-items: center;
   padding-right: 20px;

   .userInfo {
     color: #fff
   }

   nav {
     vertical-align: bottom;
     display: flex;
     align-items: flex-end;
     height: 100%;
   }

   nav a {
     display: block;
     line-height: 40px;
     height: 40px;
     color: #fff;
     border-radius: 6px 6px 0 0;
     padding: 0 20px;
    text-decoration: none;
     &:hover {
       background-color: #f70;
     }
   }

 }

 .layout {
   width: 100%;
   height: 100vh;

 }

 .layout>.el-container {
   height: 100%;
 }

 .main {
  height: 90vh;
   padding: 0;
 }
 .avtive{
  background-color: #999;
 }
</style>